<div class="safety-chain-all">
  <div class="head">
    <button nz-button nzType="primary"
            nzSize="small" [nzGhost]="true"
            nzShape="round" (click)="isCreateVisible=true">
      <i nz-icon nzType="delete" nzTheme="outline"></i>
      <span>新增</span>
    </button>
  </div>
  <div class="content">
    <nz-table #dataTable
              [nzPageSize]="size"
              [nzData]="tableModel"
              [nzTotal]="total"
              [nzFrontPagination]="false"
              [nzShowSizeChanger]="true"
              [nzShowPagination]="true"
              (nzPageIndexChange)="indexChange($event)"
              (nzPageSizeChange)="sizeChange($event)"
              [nzPageSizeOptions]="environment.config.sizeOptions"
              nzSize="small">
      <thead (nzSortChange)="sort($event)" nzSingleSort>
      <tr class="thead-tr">
        <th nzShowSort nzSortKey="name" class="th-td-5">名称</th>
        <th nzShowSort nzSortKey="url" class="th-td-3">地址(<span style="color: red">地址配置规则请查看首页文档</span>)</th>
        <th class="th-td-2">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of dataTable.data" style="height: 50px">
        <td class="th-td-5" title="{{data.name}}">{{ data.name }}</td>
        <td class="th-td-3" title="{{data.url}}">
          <a target="_blank" href="{{data.url}}">{{data.url}}</a>
        </td>
        <td class="th-td-2">
          <a (click)="create(data)">编辑</a>
          <a (click)="delete(data)">删除</a>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <!--  创建安全链接-->
  <nz-modal [(nzVisible)]="isCreateVisible" nzTitle="安全链接"
            (nzOnCancel)="isCreateVisible = false;formInfo={}"
            [nzOkDisabled]="!(commonTool.notNull(formInfo.name)&&commonTool.notNull(formInfo.url))"
            (nzOnOk)="createOk(formInfo)">
    <nz-form-item>
      <nz-form-label nzRequired>链接名称</nz-form-label>
      <nz-form-control>
        <input nz-input placeholder="链接名称" [(ngModel)]="formInfo.name"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired>链接</nz-form-label>
      <nz-form-control>
        <input nz-input placeholder="链接" [(ngModel)]="formInfo.url"/>
      </nz-form-control>
    </nz-form-item>
  </nz-modal>
</div>
